<!--
 * @Author: your name
 * @Date: 2022-03-08 09:45:50
 * @LastEditTime: 2022-03-08 10:25:31
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \JS\day08\2-Node.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            //获取body结点
            var body=document.body;
            console.log(body);
            //9Document 1Element 3Text 8Comment
            console.log(document.nodeType,'查看文档结点类型');
            console.log(body.nodeType,'查看元素结点类型');
            //  获取节点名称 返回纯大写节点名称
            console.log(body.nodeName);
            var div1=document.getElementById('one');
            console.log(div1.nodeName,'返回纯大写结点名称');
            //  4.//获取子节点  childNodes保存一个NodeList对象
        console.log(body.childNodes);
            var child=body.childNodes;
            console.log(Array.isArray(child),'不是数组对象');
            var result=Array.from(child);
            console.log(result,Array.isArray(result),'转换为类数组对象');
            //ES5将类数组对象转化为数组对象
            var result1=Array.prototype.slice.call(child,0)
            console.log(result1);

            5.//获取兄弟节点中的前一个节点
        var childs=body.childNodes;
        console.log(childs[1].previousSibling);
        //获取兄弟节点的下一个节点
        console.log(childs[1].nextSibling) 
        console.log(body.firstChild,'获取nodelist列表的第一个结点');
        //或取childNodes列表中的最后一个节点
        console.log(body.lastChild,'body.来获取列表的最后一个结点');
        //指向表示整个文档的文档节点。
        console.log(body.ownerDocument)
        //查看body节点是否有孩子节点
        console.log(body.hasChildNodes() );
        //获取某一元素节点内的元素孩子节点
        console.log(body.children);
        //从孩子节点中过滤出元素节点
        var result=Array.from(child);
        var result2=result.filter(function(item){
            return  item.nodeType == 1
        });
        console.log(result2,'过滤出元素结点');
    }
    </script>
</head>
<body>
    hello 
    <div id="one" class="two">我是块级元素div</div>
    world
    <div id="tree">222</div>
    <!-- 注释结点 -->
</body>
</html>